<!--
 * @Author: 曼珠沙华
 * @Date: 2021-06-07 14:20:23
 * @LastEditTime: 2021-06-07 17:10:42
 * @LastEditors: Please set LastEditors
 * @Description: 这是一个移动端的头条项目
 * @FilePath: \headlines\src\App.vue
-->
<template>
  <div id="app">
    <Home/>
    {{sum1}}
    <button >+</button>
    <span class="iconfont icon-shouji"></span>

    <div>
      <van-button type="primary" @click="fn">不修改全局变量进行加一</van-button>
      <van-button type="primary" @click="fn2">不修改全局变量进行减一</van-button>
    </div>
  <hr>
    <div>
       <p>{{$store.state.num}}</p>
      <van-button type="primary" @click="change">改全局变量进行加二十</van-button>
      <van-button type="primary" @click="change2">不修改全局变量进行减二十</van-button>
    </div>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
export default {
  data() {
    return{
      sum:0,
      sum1:0
    }
  },
  components:{
    Home
  },
  methods:{
    fn(){
    this.sum1++
    },
    fn2(){
      if(this.sum1!=0){
            this.sum1--

      }
    },
    // 通过vuex来修改全局变量
    change(){
      this.$store.commit('jia',20)
    },
    change2(){
      this.$store.commit('jian',20)
    }
  }
}
</script>
<style lang="less">
  hr{
    margin-top: 20px;
    margin-bottom: 20px;
  }
</style>
